<template>
	<view class="an-loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
/* 加载中  样式 */
.an-loading{
	height: 40px;
	line-height: 40px;
	position:relative;
	text-align: center;
}
.an-loading span{
	width: 5px;
	height: 5px;
	margin: 0 1px;
	display: inline-block;
	vertical-align: middle;
	background: #9b59b6;
	animation: an-loading 1.5s  infinite ease-in-out;
}  
.an-loading span:nth-child(2){
	animation-delay: .2s;  
}
.an-loading span:nth-child(3){
	animation-delay: .4s;
}
.an-loading span:nth-child(4){
	animation-delay: .6s;
}
.an-loading span:nth-child(5){
	animation-delay: .8s;
}
@keyframes an-loading {
	0% {height:5px;background:#9b59b6;}
	25% {height:30px;background:#3498db;}
	50% {height:5px;background:#9b59b6;}
	100% {height:5px;background:#9b59b6;}
}
</style>
